<template>
<div class="body">
  <Row align="middle">
    <Col offset="6" span="12">
      <Content>
        <div class="title">测试考试</div>
        <div class="content" v-if="questionData.length">
          <div class="question" v-for="(q, i) in questionData" :key="q.id">
            <div class="name">{{ (i + 1) + '. ' + q.name }}</div>
            <div class="option">
              <RadioGroup vertical v-model="answer[i].label" @on-change="radioChange($event, i)">
                <Radio v-for="o in q.options" :label="o.label" size="large" :key="q.id + o.label">{{ o.label + '. ' + o.content }}</Radio>
              </RadioGroup>
            </div>
          </div>
        </div>
        <div style="text-align: center">
          <Button type="primary" @click="submit">提交</Button>
        </div>
      </Content>
    </Col>
    <Col span="6">
      <div class="right">
        <h3>倒计时：{{ minute }} : {{ second }}</h3>
        <div class="check-list">
          <span v-for="(v, i) in questionCheckList" :class="{ 'check': v }" :key="i">{{ (i + 1) }}</span>
        </div>
      </div>
    </Col>
  </Row>

</div>
</template>

<script>
export default {
  name: "Examination",
  data() {
    return {
      minutes: 60, //分
      seconds: 0, //秒
      questionData: [],
      questionCheckList: [],
      question: null,
      answer: []
    }
  },
  methods: {
    // 倒计时
    num(n) {
      // 倒计时结束重新刷新页面
      if (this.minutes === 0 && this.seconds === 2) {
        this.submitTestPaper();
      }else {
        return n < 10 ? '0' + n : '' + n;
      }
    },
    // 倒计时
    timer() {
      let time = setInterval(() => {
        if (this.seconds === 0 && this.minutes !== 0) {
          this.seconds = 59;
          this.minutes -= 1;
        } else if (this.minutes === 0 && this.seconds === 0) {
          this.seconds = 0;
          clearInterval(time);
        } else {
          this.seconds -= 1;
        }
      }, 1000);
    },
    radioChange(status, index) {
      this.questionCheckList[index] = true
    },
    submit() {
      this.$Modal.confirm({
        title: '提示',
        content: `是否确认提交！`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          let length = this.questionCheckList.filter(v => !v).length
          if(length > 0) {
            this.$Modal.confirm({
              title: '提示',
              content: `还有${length}道题没有完成，是否提交！`,
              okText: '确定',
              cancelText: '取消',
              onOk: () => {
                this.submitTestPaper();
              }
            })
          }else {
            this.submitTestPaper();
          }
        }
      })
    },
    submitTestPaper() {
      this.$http.post(`submitTestPaper?id=${this.$route.params.id}`, this.answer).then(res => {
        if(res.code === 200) {
          this.$Message.success(res.msg)
          this.$router.replace("/index/exam")
        }
      })
    }
  },
  mounted() {
    this.$http.get(`paper/${this.$route.params.id}`).then(res => {
      if(res.code === 200) {
        this.question = res.data.question
        this.$http.get(`getBySubject?subjectId=${this.question.subjectId}`).then(res => {
          this.questionData = res.data.list
          this.questionData.forEach(v => {
            this.questionCheckList.push(false);
            this.answer.push({ id: v.id, label: '' });
          })
        })
        let date = new Date(this.question.startTime)
        date.setMinutes(date.getMinutes() + this.question.duration)
        if(date.getTime() < new Date().getTime()) {
          this.$Message.warning("考试已结束！")
          this.$router.replace(`/index/exam`)
        }
        let ms = Math.abs(date - new Date())
        this.minutes = Math.floor(ms / 1000 / 60)
        this.seconds = 60 - new Date().getSeconds()
        this.timer();
      }
    });
  },
  watch: {
    // 倒计时
    second: {
      handler(newVal) {
        this.num(newVal);
      },
    },
    // 倒计时
    minute: {
      handler(newVal) {
        this.num(newVal);
      },
    },
  },
  computed: {
    // 倒计时
    second: function() {
      return this.num(this.seconds);
    },
    minute: function() {
      return this.num(this.minutes);
    },
  },
}
</script>

<style scoped lang="scss">
.body {
  padding-bottom: 70px;
  .title {
    font-size: 24px;
    margin: 30px;
    color: black;
    text-align: center;
  }
  .content {
    .question {
      .name {
        font-size: 18px;
      }
      margin-bottom: 24px;
    }
  }
  .right {
    position: fixed;
    top: 60px;
    .check-list {
      margin-top: 10px;
      margin-right: 80px;
      span {
        display: inline-block;
        border: #ddd 1px solid;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 15px;
        margin-top: 10px;
      }
    }
  }
}
.check {
  background: #5cadff;
}
</style>
